<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>love yours</title>
<style>
html {
	height: 100%;
	width: 100%;
}
body {
	background-image: url(https://gitee.com/fanyili/lohy/raw/master/imgs/bg.png);
	background-repeat: no-repeat no-repeat;
	background-size: 100% 100%;
}
.pwd-input {
	width: 290px;
	height: 45px;
	border: 0px solid silver;
	margin: 18% auto auto;
	border-radius: 20px;
	background-color: red;
    background-image: linear-gradient(#e66465,#9198e5);
}
.pwd-input-content {
	height: 35px;
	width: 90px;
	top: 10%;
	left: 5%;
	position: relative;
	font-family: "宋体";
	float: left;
	text-align: center;
	line-height: 35px;
	color: pink;
}
#pwd {
	width: 120px;
	height: 26px;
	float: left;
	margin-left: 10px;
	margin-top: 6px;
}
#confirm {
	height:45px;
	width:50px;
	background-color: #008CBA;
	border-radius: 0px 20px 20px 0px;
	float: right;
	cursor: pointer;
}
#confirm span{
	width: 100px;
	height: 40px;
	line-height:40px;
	margin-left: 10px;
	color: white;
}
footer {
	border-style:1px solid grey;
	position: fixed;
	bottom: 0;
}
</style>
</head>
<body>
<div class="pwd-input"><div class="pwd-input-content">开门密码：</div><input type="text" id="pwd" /><div id="confirm" onclick="enter()"><span>进入</span></div></div>
<footer>
<a href="https://beian.miit.gov.cn/" target="_blank">浙B2-20080101</a>
</footer>
</body>

</html>
<script>
function enter() {
	var password = document.getElementById("pwd").value;
	if (password == "20211224") {
		alert("Suprise，平安夜圣诞快乐!");
	} else {
		alert("密码不正确哦");
	}
};
</script>
